<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@charset "utf-8";
			body{font-family: "Microsoft YaHei",serif;}
			body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
			ol,ul,li{margin:0;padding:0;list-style:none;}
			img{border:none;}
			::-webkit-scrollbar {
			-webkit-appearance: none;
			width: 4px;
			}
			::-webkit-scrollbar-thumb {
			border-radius: 4px;
			background-color: rgba(0,0,0,.5);
			-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
			}
			::-webkit-scrollbar-thumb {
			border-radius:10px;
			background: #5d9d6d;
			}
			html,body,.main{
				width: 100%;
				height: 100%;
				overflow: hidden;
				-webkit-user-select: none;
				box-sizing: border-box;
				background-color: rgb(255, 217, 102); 
			}
			.main{
				position: relative;
				display: block;
			}
			.bgCover{
				position: absolute;
				width:100%;
				height: 40%;
				left: 0;
				bottom: 0;
				background: url("dt1.png") no-repeat center/cover;
				animation: putTea 2s linear 1 both;
			}
			@keyframes putTea {
				0%{
				}
				50%{
					background:url("dt2.png") no-repeat center/100%;
				}
				to{
					background:url("dt1.png") no-repeat center/100%;
				}
				
			}
			.talk1{
				opacity: 1;
				position: absolute;
				bottom: 400px;
				right: 10px;
				animation: bounceInRight 2s 1 1.5s both;
				z-index: 1;
			}
			.talk2{
				opacity: 1;
				position: absolute;
				top: 240px;
				left: 10px;
				animation: bounceInLeft 2s 1 2.5s both;
				z-index: 1;
			}
			@keyframes bounceInLeft {
				from,
				60%,
				75%,
				90%,
				to {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
					animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
				}
				0% {
					opacity: 0;
					-webkit-transform: translate3d(-3000px, 0, 0);
					transform: translate3d(-3000px, 0, 0);
				}
				60% {
					opacity: 1;
					-webkit-transform: translate3d(25px, 0, 0);
					transform: translate3d(25px, 0, 0);
				}
				75% {
					-webkit-transform: translate3d(-10px, 0, 0);
					transform: translate3d(-10px, 0, 0);
				}
				90% {
					-webkit-transform: translate3d(5px, 0, 0);
					transform: translate3d(5px, 0, 0);
				}
			
				to {
					opacity: 1;
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}
			}
			@keyframes bounceInRight {
				from,
				60%,
				75%,
				90%,
				to {
					-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
					animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
				}
			
				from {
					opacity: 0;
					-webkit-transform: translate3d(3000px, 0, 0);
					transform: translate3d(3000px, 0, 0);
				}
			
				60% {
					opacity: 1;
					-webkit-transform: translate3d(-25px, 0, 0);
					transform: translate3d(-25px, 0, 0);
				}
			
				75% {
					-webkit-transform: translate3d(10px, 0, 0);
					transform: translate3d(10px, 0, 0);
				}
			
				90% {
					-webkit-transform: translate3d(-5px, 0, 0);
					transform: translate3d(-5px, 0, 0);
				}
			
				to {
					opacity: 1;
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="bgCover">	
			</div>
		<img src="daughter.png" alt="" class="talk1">
		<img src="father.png" alt="" class="talk2">
		</div>
	</body>
</html>
